<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>width:auto 和 width:100%的区别</title>
<style type="text/css">
   .father1, .father2 {
       width: 200px;
       height: 200px;
       border: 10px solid red;
       padding: 20px;
       background-color: #ddd;
   }
   .son1 {
       width: 100%;
       border: 10px solid blue;
       padding: 20px;
       /* margin: 30px; */
       background-color:chartreuse;
   }
   .son2 {
       width: auto;
       border: 10px solid blue;
       padding: 20px;
       margin: 30px;
       background-color:chartreuse;
   }
</style>
</head>
<body>
<pre>
一般而言

width:100%会使元素box的宽度等于父元素的content box的宽度。

width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。
</pre>
<div class="father1">
    <div class="son1"></div>
</div>
<br>
<div class="father2">
    <div class="son2"></div>
</div>

<script type="text/javascript">

</script>
</body>
</html>
